.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .order-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100px;

    .total-font {
      font-size: 14px;
      color: gray;
    }

    .total-sales {
      width: 28%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #ccc;
      border-radius: 10px;
      background-color: #fff;

      .total-sales-icon {
        width: 30%;
        display: flex;
        justify-content: center;
        font-size: 56px;
      }
      .total-sales-content {
        flex: 1;
        line-height: 140%;
        font-size: 30px;
        font-weight: 600;
      }
    }

    .total-order {
      width: 70%;
      display: flex;
      justify-content: space-around;
      border: 1px solid #ccc;
      border-radius: 10px;

      .total-order-num {
        width: 30%;
        display: flex;
        align-items: center;
        line-height: 50px;
        .total-order-num-icon {
          width: 40%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 56px;
        }

        .total-order-nums {
          flex: 1;
          font-size: 30px;
          font-weight: 600;
        }
      }

      .total-all-order {
        flex: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;

        div {
          text-align: center;
          .total-num {
            margin: 10px 0;
            font-size: 30px;
            font-weight: 600;
          }
        }
      }
    }
  }

  .order-center {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    width: 100%;
    height: 250px;

    // 销量统计
    .sales-statistics {
      width: 70%;
      height: 240px;
      padding: 5px 10px;
      border: 1px solid #ccc;
      border-radius: 10px;
      box-sizing: border-box;

      .sales-statistics-title {
        width: 100%;
        height: 10%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .sales-statistics-title-font {
          display: inline-block;
        }

        .sales-statistics-title-btns {
          float: right;
          span {
            display: inline-block;
            margin: 10px 15px;
          }
        }
      }

      .sales-statistics-echarts {
        height: 240px !important;
      }
    }
    // 销售额排行榜
    .sales-ranking {
      width: 28%;
      height: 240px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 10px;

      .sales-ranking-title {
        height: 10%;
      }

      .sales-ranking-content {
        margin-top: 10px;
        box-sizing: border-box;
        overflow: hidden;
        .sales-ranking-content-item {
          line-height: 40px;
          span {
            display: inline-block;
            width: 25%;
          }
        }
      }
    }
  }

  .order-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    height: 200px;

    // 订单类型
    .order-types {
      width: 32%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 10px;

      .order-types-title{
        height: 10%;
      }

      .order-types-echarts {
        width: 100%;
        height: 150px;
        display: flex;
        justify-content: space-around;
        div {
          width: 120px;
          height: 150px !important;
        }
      }
    }

    // 订单来源
    .order-sources {
      width: 36%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 10px;

      .order-sources-title {
        width: 100%;
        height: 10%;
      }

      .order-sources-echarts {
        width: 100%;
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        div {
          width: 100%;
          height: 150px !important;
        }
      }
    }
    // 出租率
    .letting-rate {
      width: 28%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 10px;

      .letting-rate-title {
        height: 10%;
      }
      .letting-rate-content {
        text-align: center;
        font-size: 20px;
        p {
          margin-top: 20px;
          span {
            margin-left: 10px;
          }
        }
      }
    }
  }
}
